<template>
  <div class="app-container">
    <div class="menu-container">

      <el-form :inline="true" style="float: left;">
        <el-button size="mini" type="primary" @click="showAddBannerDialog()">添加Banner</el-button>
      </el-form>

      <el-form :inline="true" :model="listQuery" style="float: right;">

        <el-form-item>
          <el-input v-model="listQuery.cate_name" size="mini" placeholder="Banner名"/>
        </el-form-item>

        <el-form-item>
          <el-button size="mini" icon="el-icon-search" type="warning" circle @click="getList()"/>
        </el-form-item>

      </el-form>

    </div>

    <el-table v-loading="listLoading" :data="page.records" border fit highlight-current-row style="width: 100%">

      <el-table-column align="center" label="ID" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column width="120px" align="center" label="标题">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="300px" label="封面图片">
        <template slot-scope="scope">
          <img :src="scope.row.image_file" style="width: 80px;" >
        </template>
      </el-table-column>

      <el-table-column width="180px" align="center" label="目标地址">
        <template slot-scope="scope">
          <span>{{ scope.row.url }}</span>
        </template>
      </el-table-column>

      <el-table-column width="160px" align="center" label="排序">
        <template slot-scope="scope">
          <template v-if="scope.row.edit">
            <el-input-number v-model="scope.row.show_order" :min="1" :max="1000" size="mini" />
          </template>
          <span v-else>{{ scope.row.show_order }}</span>
        </template>
      </el-table-column>

      <el-table-column width="100px" align="center" label="创建时间">
        <template slot-scope="scope">
          <span>{{ scope.row.created_at }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="200px">
        <template slot-scope="scope">

          <el-button type="primary" size="small" icon="el-icon-edit" @click="editBanner(scope.row)">编辑</el-button>
          <el-button type="danger" size="small" icon="el-icon-delete" @click="delBanner(scope.row)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
    <div class="paginator">
      <el-pagination
        :current-page="page.pageNum"
        :background="true"
        :page-sizes="[50, 100]"
        :page-size="page.pageSize"
        :total="page.recordsTotal"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="currentPageSizeChange"
        @current-change="currentPageNumChange"/>
    </div>

    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">

      <el-form :model="form">
        <el-form-item :label-width="formLabelWidth" label="标题">
          <el-input v-model="form.name" auto-complete="off" size="mini"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="目标地址">
          <el-input v-model="form.url" auto-complete="off" size="mini"/>
        </el-form-item>
        <el-form-item prop="image_file" style="margin-bottom: 10px;" label="封面图">
          <Upload v-model="form.image_file" />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="排序">
          <el-input-number v-model="form.show_order" :min="1" :max="100" size="mini" label="排序"/>
          <span>排序值越小排序越靠前</span>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="状态">
          <el-select v-model="form.state" placeholder="请选择" size="mini">
            <el-option
              v-for="item in stateOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" size="mini" @click="createBannerHandle()">确 定</el-button>
      </div>

    </el-dialog>

  </div>
</template>

<script>
import { fetchList, createBanner, updateBanner, deleteBanner } from '@/api/banner'
import Upload from '@/components/Upload/singleImage3'

export default {
  name: 'BannerList',
  components: { Upload },
  data() {
    return {
      list: null,
      listLoading: true,
      dialogTitle: '新增Banner',
      formLabelWidth: '100px',
      stateOptions: [
        { value: 0, label: '正常' },
        { value: 1, label: '禁用' }
      ],
      form: { id: undefined, title: '', description: '', image_file: '', url: '', show_order: 1, state: 0, type: '' },
      dialogFormVisible: false,
      listQuery: {
        pageSize: 100,
        pageNum: 1,
        cate_name: ''
      },
      page: {
        pageNum: 1, pageSize: 100, pageTotal: 0, recordsTotal: 0, records: []
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    clearForm() {
      this.form = { id: undefined, name: '', description: '', image_file: '', url: '', show_order: 1, state: 0 }
    },
    editBanner(row) {
      this.form.id = row.id
      this.form.name = row.name
      this.form.image_file = row.image_file
      this.form.url = row.url
      this.form.show_order = row.show_order
      this.form.state = row.state
      this.dialogTitle = '修改Banner'
      this.dialogFormVisible = true
    },
    delBanner(row) {
      deleteBanner(row.id).then(response => {
        const r = response.data
        if (r.code === 0) {
          this.$message({ message: '删除成功', type: 'success' })
          this.getList()
        } else {
          this.$message({ message: r.msg, type: 'error' })
        }
      })
    },
    showAddBannerDialog() {
      this.clearForm()
      this.dialogTitle = '新增Banner'
      this.dialogFormVisible = true
    },
    createBannerHandle() {
      createBanner(this.form).then(response => {
        const r = response.data
        if (r.code === 0) {
          this.$message({ message: '操作成功', type: 'success' })
          this.dialogFormVisible = false
          this.clearForm()
          this.getList()
        } else {
          this.$message({ message: r.msg, type: 'error' })
        }
      })
    },
    currentPageNumChange(currentPageNum) {
      this.page.pageNum = currentPageNum
      this.getList()
    },
    currentPageSizeChange(currentPageSize) {
      this.page.pageSize = currentPageSize
      this.getList()
    },
    getList() {
      this.listLoading = true
      fetchList(this.listQuery).then(response => {
        this.page = response.data.data
        this.listLoading = false
      })
    },
    cancelEdit(row) {
      row.edit = false
      this.$message({
        message: '取消分类修改',
        type: 'warning'
      })
    },
    confirmEdit(row) {
      row.edit = false
      updateBanner(row).then(response => {
        const r = response.data
        if (r.code === 0) {
          this.$message({ message: '更新成功', type: 'success' })
        } else {
          this.$message({ message: r.msg, type: 'error' })
        }
      })
    }
  }
}
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
